import React,{useState,useEffect} from 'react'
import './less/listtable.less'
import { Table, Button, Space } from 'antd';
import { Link } from 'react-router-dom';
import moment from 'moment'
import {ArticleListApi} from '../request/api'

// 标题组件
function Mytitle(props){
 return (
  <div>
  <Link to='/' className='table_title'>${props.title}</Link>
  <p style={{color:'#999'}}>${props.subTitle}</p>
  </div>
 )
}

export default function ListTable() {
  // 列表数组
  const [arr,setArr] = useState([{
    key: '1',
    name: 'John Brown',
    address: 'New York No. 1 Lake Park',
  }])
  
  // 请求数据
  // useEffect(()=>{
  //   ArticleListApi().then(res=>{
     
  //     if(res.errCode === 0){
        
  //       // 深拷贝
  //       let newArr = JSON.parse(JSON.stringify(res.data.arr));
  //       // 每个数组向加key,让key=id
  //       // 需要有一套标签结构，赋予一个属性
  //       newArr.map(item=>{
  //         item.key = item.id
  //         item.date = moment(item.date).format('YYYY-MM-DD hh:mm:ss')
  //         item.mytitle = `
          // <div>
          // <Link to='/' className='table_title'>${item.title}</Link>
          // <p style={{color:'#999'}}>${item.subTitle}</p>
          // </div>
  //         `
  //         console.log(newArr);
  //         setArr(newArr)
  //       })
  //     }
  //   })
  // },[])

  const getArticleList = ()=>{
    ArticleListApi().then(res=>{
     
      if(res.errCode === 0){
        // 深拷贝
        let newArr = JSON.parse(JSON.stringify(res.data.arr));
        // 每个数组向加key,让key=id
        // 需要有一套标签结构，赋予一个属性

        // 声明一个空数组
        let myarr = []
        newArr.map(item=>{
         let obj = {
           key:item.id,
           data:moment(item.date).format('YYYY-MM-DD hh:mm:ss'),
           mytitle:<Mytitle title={item.title}  subTitle={item.subTitle}/>
         }
         myarr.push(obj)
          // console.log(newArr);
          setArr(myarr) 
        })
       
      }
    })
  }


  useEffect(()=>{
    getArticleList();
  },[])

  // 每一列数据
  const columns = [
    {
    
      dataIndex: 'mytitle',
      key: 'mytitle',
      width:'60%',
      render: text => <div>{text}</div>
    },
  
    {
    
      dataIndex: 'date',
      key: 'date',
      render: text => <p>{text}</p>,
    },
    {
      
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          <Button type='primary' onClick={()=>console.log(text.key)}>编辑</Button>
          <Button type='danger'>删除</Button>
        </Space>
      ),
    },
  ];


  return (
    <div className='list_table'>
      {/*columns(列) dataSource(数据) */}
      <Table showHeader={false} columns={columns} dataSource={arr} />
    </div>
  )
}




